<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>理解回调地狱</title>
</head>
<body>
    
</body>
<script>
    /*
        异步的操作逻辑其实 先执行主线程的任务，所以在下面的这段代码中，无论如何都是‘主线程已经完成’先输出
            然后 一会回调函数会被放到任务队列中  
                ！！！！  注意  在任务队列中是没有先后之分的 ，任务队列的工作原理就是会快加载谁，谁的数据少更快加载就先加载谁
                    显然，任务队列的工作原理并不符合我们有时候的逻辑
                        所以我们为了让任务队列能够按顺序的执行，就得按照  回调里面使用回调的方法  这样就一定会按照顺序来执行任务队列的方法
            这  ！！   就是回调地狱！！
    */
    function load(src,succeed,error){
        let script = document.createElement('script')  //页面创建一个script元素
        script.src = src
        script.onload = succeed
        script.onerror = error
        document.body.appendChild(script)  //在页面body中添加一个子元素
    }
    // 普通的方法，浏览器的执行顺序会按照谁快就执行谁的顺序 ，不符合我i们的逻辑，所以不行
    // load('./js/b.js',()=>{
    //     getb()
    // },()=>{})
    // load('./js/a.js',()=>{
    //     geta()
    // },()=>{})

    // 回调嵌套回调的方法

        /* 
            使用这样的回调地狱的方式就能够保证，任务队列里面的执行顺序一定是按照我们书写的代码的顺序来执行的了
                但是也有不好的地方，就是当任务很多时，会出现没完没了的回调
        */
    load('./js/b.js',()=>{
        getb()
        load('./js/a.js',()=>{
            geta()
        },()=>{})
    },()=>{})
    console.log('主线程已经完成')
    // 需要能够理解的是，不管任务的执行顺序是怎么 主线程的任务一定是从上至下执行的
</script>
</html>